<template>
    <div style="margin:0 auto;height:800px;overflow:scroll;">
        <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
            <el-row :gutter="26">
                <!-- 搜索框 -->
                <el-col :span="3.3">
                    申请时间：<el-date-picker
                    style="width:250px"
                        v-model="listQuery.time"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col  :span="3.3">
                    提现状态：
                    <el-select style="width:100px" v-model="type" clearable placeholder="请选择">
                        <el-option
                            v-for="item in listQuery.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3.3">
                    手机号：<el-input style="width:140px" v-model="listQuery.telephone" placeholder="请输入手机号" clearable></el-input>
                </el-col>
                <el-col :span="2">
                    <el-input style="width:100px" v-model="listQuery.check_name" placeholder="姓名" clearable></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="listQuery.team_name" placeholder="所属店铺名" clearable></el-input>
                </el-col>
                <el-col  :span="2">
                    <el-button type="primary" icon="el-icon-search" @click="searchActivity()">搜索</el-button>
                </el-col>
                <el-col  :span="4">
                    <el-button type="primary" @click="exportExcel()">导出excel</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="width: 98%;margin: 10px auto 0"></div>
        <el-table :data="incomeList" class="table" border :key="incomeList.length" v-loading="loading" element-loading-text="拼命加载中....">

            <el-table-column label="提现时间" align="center">
                <template slot-scope="{row}">
                <span>{{newtime(row.apply_time)}}</span>
                <!-- <image :src="row.WeChat_Avatar"></image> -->
                </template>
            </el-table-column>

            <el-table-column label="姓名" align="center">
                <template slot-scope="{row}">
                <span>{{row.check_name}}</span>
                <!-- <image :src="row.check_name"></image> -->
                </template>
            </el-table-column>

            <el-table-column label="所属店铺" align="center">
                <template slot-scope="{row}">
                <span v-if="row.customer_store !=null">{{row.customer_store.name}}</span>
                </template>
            </el-table-column>

            <el-table-column label="手机号" align="center">
                <template slot-scope="{row}">
                <span v-if="row.customer_store !=null">{{row.customer_store.telephone}}</span>
                </template>
            </el-table-column>

            <el-table-column label="收益类型" align="center">
                <template slot-scope="{row}">
                <span v-if="row.type=='new_user'">新人推荐收益</span>
                <span v-else-if="row.type=='online_courses'&&row.level==1">直接团队收益</span>
                <span v-else-if="row.type=='online_courses'&&row.level==2">间接团队收益</span>
                <span></span>
                <!-- <span>{{row.type}}</span> -->
                </template>
            </el-table-column>

            <el-table-column label="新人推荐总收益" align="center">
                <template slot-scope="{row}">
                <span>{{row.balance_before_modification}}</span>
                </template>
            </el-table-column>

            <el-table-column label="已经提现金额" align="center">
                <template slot-scope="{row}">
                <span>{{row.withdrawal_amount||0.00}}</span>
                </template>
            </el-table-column>

            <el-table-column label="本次提现金额" align="center">
                <template slot-scope="{row}">
                <span>{{row.The_amount_of_cash_withdrawal}}</span>
                </template>
            </el-table-column>

            <el-table-column label="提现状态" align="center">
                <template slot-scope="{row}">
                <span v-if="row.status=='in_confirm'" style="color:#409EFF">确认中</span>
                <span v-else-if="row.status=='confirmed'" style="color:#67C23A">已确认</span>
                <span v-else-if="row.status=='invalid'" style="color:#F56C6C">无效</span>
                <span v-else></span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="{row}" v-if="row.status=='in_confirm'">
                    <el-button @click="to_be_confirmed(row.id)">同意</el-button>
                    <el-button @click="Effective_income(row.id)">拒绝</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="pagination-container">
            <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>
<script>
// import {getonlinecourses,del,edit,getorder,get_excel,get_order_custom_info,get_select,confirmed,invalid} from '@/api/thk/onlinecourses'
import {get_list,agree,disagree} from "@/api/thk/cashoutapply"
import store from '@/store'
export default {
    name:'',
    data(){
        return{
            listQuery:{
                title:'',
                time:'',
                page:1,
                pagesize:10,
                starttime:'',
                apply_time:'',
                end_time:'',
                check_name:'',
                check_time:'',
                options: [{
                    value: 'in_confirm',
                    label: '待确认'
                    }, {
                    value: 'confirmed',
                    label: '已提现'
                    }, {
                    value: 'invalid',
                    label: '已拒绝'
                    }],
                telephone:''
            },
            type:'',
            checkedCities:['中文'],
            incomeList:[],
            loading:true,
            total:0,
            allList:[],
            List:[]
        }
    },
    inject: ['reload'],
    created() {
      this.getList()
      let data={
          page:1,
          pagesize:10000
      }
      get_list(this.$store.getters.token,data).then(res=>{
            res.data.list.data.map(item=>{
                item.all_withdrawal_balance=item.remark.split('为')[2].split('，')[0]
                item.The_amount_of_cash_withdrawal=item.remark.split('为')[1].split('，')[0]
                item.withdrawal_amount=(item.balance_before_modification-item.balance_after_modification).toFixed(2)
                this.allList.push(item)
                console.log(this.allList,"987")
            })
            this.loading=false
        })
    },
    methods:{
        async typechange(){
            this.loading=true
            // this.List=this.onlinecoursesList
            this.incomeList=[]
            let that=this
            await this.List.map(item=>{
                console.log(that.listQuery.money_item_status)
                if(item.status.match(that.type)){
                    that.incomeList.push(item)
                }
                console.log("123")
                that.loading=false
            })
        },
        handleSizeChange(val) {
            this.loading=true
            this.listQuery.pagesize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.loading=true
            this.listQuery.page = val
            this.getList()
        },
        exportExcel() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = [
                    '提现时间',
                    "姓名",
                    "所属店铺",
                    '手机号',
                    '收益类型',
                    '新人推荐总收益',
                    '已经提现金额',
                    '本次提现金额',
                    '提现状态',
                ]
                const filterVal = [
                    'apply_time',
                    'check_name',
                    ['customer_store','name'],
                    ['customer_store','telephone'],
                    'type',
                    'balance_before_modification',
                    'withdrawal_amount',
                    'balance_after_modification',
                    'status',
                ]
                const data = this.formatJson(filterVal)
                excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: 'table-list'
                })
                this.downloadLoading = false
            })
        },
        formatJson(filterVal) {
            return this.allList.map(v => filterVal.map(j => {
                if(j.length==2){
                    return v[j[0]][j[1]]
                }else{
                    if(j=='apply_time'){
                        return this.newtime(v[j])
                    }else if(j=='type'){
                        if(v[j]=='new_user'){
                            return "新人推荐收益"
                        }else if(v[j]=='online_courses' && v['level']==1){
                            return "直接团队收益"
                        }else if(v[j]=='online_courses' && v['level']==2){
                            return "间接团队收益"
                        }
                    }else{
                        return v[j]
                    }
                }
            }))
        },
        newtime(num){
            const str=new Date(num*1000).toLocaleString()
            return str;
        },
        getList(){
            // const data={
            //     page:1,
            //     pagesize:10
            // }
            let data={}
            if(this.listQuery.time.length==2){
                data={
                    apply_time_start:new Date(this.listQuery.time[0]).getTime()/1000,
                    apply_time_end:new Date(this.listQuery.time[1]).getTime()/1000,
                    status:this.type,
                    phone:this.listQuery.telephone,
                    name:this.listQuery.check_name,
                    store_name:this.listQuery.team_name,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize
                }
            }else{
                data={
                    // apply_time:new Date(this.listQuery.time[0]).getTime()/1000,
                    // check_time:new Date(this.listQuery.time[1]).getTime()/1000,
                    status:this.type,
                    phone:this.listQuery.telephone,
                    name:this.listQuery.check_name,
                    store_name:this.listQuery.team_name,
                    page:this.listQuery.page,
                    pagesize:this.listQuery.pagesize
                }
            }
            get_list(this.$store.getters.token,data).then(res=>{
                this.total=res.data.list.total
                this.incomeList=[]
                console.log(res,"998766")
                // this.incomeList=res.data.list.data
                res.data.list.data.map(item=>{
                    item.all_withdrawal_balance=item.remark.split('为')[2].split('，')[0]
                    item.The_amount_of_cash_withdrawal=item.remark.split('为')[1].split('，')[0]
                    item.withdrawal_amount=(item.balance_before_modification-item.balance_after_modification).toFixed(2)
                    this.incomeList.push(item)
                    this.List=this.incomeList
                })
                console.log(res.data.list.data[0].remark.split('为'))
                this.loading=false
            })
        },
        to_be_confirmed(index){
            const data={
                id:index
            }
            agree(this.$store.getters.token,data).then(res=>{
                if(res.data.status){
                    this.$message.success(res.data.msg)
                }else{
                    this.$message.error(res.data.msg)
                }
                console.log("agree",res)
            })
        },
        Effective_income(index){
            const data={
                id:index
            }
            disagree(this.$store.getters.token,data).then(res=>{
                if(res.data.status){
                    this.$message.success(res.data.msg)
                }else{
                    this.$message.error(res.data.msg)
                }
                // this.$message.error(res.msg)
                console.log("disagree",res)
            })
        },
        searchActivity(){
            this.incomeList=[]
            this.getList()
        },
        addcoursrs(){

        },
    }
}
</script>
<style lang="">

</style>
